<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-07-17 16:10:51
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-07-26 16:02:49
 * @FilePath: \router\src\components\form\login-input.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<script lang="ts" setup>
const emits = defineEmits(['blur']);
const props = defineProps({
  placeholder: {
    type: String,
    required: true,
  },
  type:{
    type:String,
    default:'account'
  },
  errorMsg:{
    type:String,
    default:'请输入用户名'
  },
  inputType:{
    type:String,
    default:'text'
  }

});

const model = defineModel();

const handleBlur = () => {
  emits('blur', props.type);
};
</script>

<template>
  <div>
    <input
      :type="inputType"
      v-model="model"
      :placeholder="props.placeholder"
      class="login-input"
      @blur="handleBlur"
    />
   <div :class="{'error-msg':errorMsg}">
    <span  v-if="errorMsg">{{ errorMsg }}</span>
   </div>
  </div>
</template>

<style lang="scss" scoped>
.login-input {
  @apply border w-full rounded-sm py-1 px-2 outline-none border-gray-200 placeholder:text-xs focus:ring-2 ring-offset-2 ring-violet-600 duration-300 focus:border-none;
}
.error-msg{
  @apply text-white text-xs mt-1 bg-red-500 px-2 py-1 rounded-sm rounded-md;
}
</style>
